<script>
import smoothscroll from 'smoothscroll-polyfill';

import { px2rem } from '@/helper';

// kick off the polyfill!
smoothscroll.polyfill();

export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 200,
    },
    /*
    * 是否竖向
    */
    isVertical: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentTab: 0,
      tabPanel: [],
    };
  },
  computed: {
    calcStyle() {
      const tabsLen = this.tabs.length;
      const width = 100 / tabsLen;
      return {
        width: `${width}%`,
        left: `${width * this.currentTab}%`,
      };
    },
    windowDimensions() {
      const { innerHeight } = window;
      // const heightRem = px2rem(innerHeight - 10);
      const heightRem = px2rem(innerHeight);
      // const header = px2rem(0);
      const header = px2rem(45);
      // const immerBar = px2rem(Math.round(plus.navigator.getStatusbarHeight()));
      // return `${heightRem - header}rem`;
      return `${heightRem}rem`;
    },
  },
  methods: {
    handleTabClick(index) {
      this.currentTab = index;
      this.getContentPosByIndex();
    },
    getContentPosByIndex() {
      const index = this.currentTab;
      // const value = `${-index * 100}%`;
      const value = this.$refs[`panel${index}`];
      if (!value) return false;
      // const offset = value.offsetTop;
      value.scrollIntoView({ block: 'start', behavior: 'smooth' });
      // const translate = this.isVertical ? `0px, -${offset}px` : `${offset}, 0px`;
      // return `translate3d(${translate}, 1px)`;
    },
  },
  render() {
    const tabPanel = this.$slots.default;
    return (
      <div
      class="tab-bar"
      >
        <div class="tab-bar-wrap">
          {
            this.tabs.map(({ title }, index) => (
              <div
                style={this.calcStyle}
                class={['tab-item', { active: index === this.currentTab }]}
                on-tap={() => this.handleTabClick(index)}
                >
                { title }
              </div>
            ))
          }
          <div
            style={this.calcStyle}
            class="tab-bar-underline"/>
        </div>
        {
          tabPanel
          && <div style={{ height: this.windowDimensions }} class="tabs-content-wrapper" >
            <div class="tabs-content tabs-content-wrap-animated"
              ref="tabPanel"
               >
                  {
                    tabPanel.map((item, index) => (
                      <div class="tabs-panel" id={`link${index}`} ref={`panel${index}`}>
                        {item}
                      </div>
                    ))
                  }
            </div>
          </div>
        }
    </div>
    );
  },
};
</script>

<style lang="less" scoped>
@import '~@/theme/variable.less';
@height: 90px;
.tab-bar{
  position: relative;
}
.tab-bar-wrap{
  position: absolute;
  width: 100%;
  display: flex;
  text-align: center;
  overflow: hidden;
  word-break: break-all;
  background-color: #ffffff;
  z-index: 2;
  border: 1px solid #f2f2f2;
  .tab-item{
    color: #a9aba9;
    height: @height;
    font-size: 28px;
    font-weight: 400;
    line-height: @height;
    &.active{
      color: @primary-color;
    }
  }
  .tab-bar-underline{
    position: absolute;
    border: 1px solid  @primary-color;
    bottom: 0;
    transition: top .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1),color .3s cubic-bezier(.35,0,.25,1),width .3s cubic-bezier(.35,0,.25,1);
    will-change: top,left,width,color
  }
}
.tabs-content-wrapper{
  // padding-top: @height;
  overflow-y: scroll;
  .tabs-content{
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    // &-wrap-animated {
      //   transition: left .3s cubic-bezier(.35,0,.25,1),top .3s cubic-bezier(.35,0,.25,1),-webkit-transform .3s cubic-bezier(.35,0,.25,1);
    //   transition: transform .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1),top .3s cubic-bezier(.35,0,.25,1);
    //   transition: transform .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1),top .3s cubic-bezier(.35,0,.25,1),-webkit-transform .3s cubic-bezier(.35,0,.25,1);
    //   will-change: transform,left,top
    // }
    #link0{
      padding-top: @height;
    }
  }
}

.tabs-content-wrapper::-webkit-scrollbar {
  display: none;
}

</style>
